<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" :rules="rules" size="默认" label-width="80px" label-position="左对齐">
      <el-row gutter="15">
        <el-col :span="12">
          <el-form-item label="商品名称" prop="productName">
            <el-input v-model="formData.productName" type="text" placeholder="请输入商品名称" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品排序" prop="seq">
            <el-input v-model="formData.seq" type="text" placeholder="请输入商品排序" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-form-item label="商品父目录" prop="parentId">
          <el-select v-model="formData.parentId" placeholder="请选择商品父目录" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in parentIdOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row gutter="15">
        <el-col :span="12">
          <el-form-item label="商品价格" prop="price">
            <el-input v-model="formData.price" type="text" placeholder="请输入商品价格" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="适用人群" prop="man">
            <el-input v-model="formData.man" type="text" placeholder="请输入适用人群" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="15">
        <el-col :span="12">
          <el-form-item label="评分" prop="field112">
            <el-rate v-model="formData.field112"></el-rate>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品图片" prop="img" required>
            <el-upload ref="img" :file-list="imgfileList" :action="imgAction"
              :before-upload="imgBeforeUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="商品简介" prop="fired">
        <el-input v-model="formData.fired" type="textarea" placeholder="请输入商品简介"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
const {
  proxy
} = getCurrentInstance()
const formRef = ref()
const data = reactive({
  formData: {
    productName: undefined,
    seq: undefined,
    parentId: undefined,
    price: undefined,
    man: undefined,
    field112: 0,
    img: null,
    fired: undefined,
  },
  rules: {
    productName: [{
      required: true,
      message: '请输入商品名称',
      trigger: 'blur'
    }],
    seq: [{
      required: true,
      message: '请输入商品排序',
      trigger: 'blur'
    }],
    parentId: [{
      required: true,
      message: '请选择商品父目录',
      trigger: 'change'
    }],
    price: [{
      required: true,
      message: '请输入商品价格',
      trigger: 'blur'
    }],
    man: [{
      required: true,
      message: '请输入适用人群',
      trigger: 'blur'
    }],
    field112: [{
      required: true,
      message: '评分不能为空',
      trigger: 'change'
    }],
    fired: [{
      required: true,
      message: '请输入商品简介',
      trigger: 'blur'
    }],
  }
})
const {
  formData,
  rules
} = toRefs(data)
const parentIdOptions = ref([{
  "label": "选项一",
  "value": 1
}, {
  "label": "选项二",
  "value": 2
}])
// 上传请求路径
const imgAction = ref('https://jsonplaceholder.typicode.com/posts/')
// 上传文件列表
const imgfileList = ref([])
/**
 * @name: 上传之前的文件判断
 * @description: 上传之前的文件判断，判断文件大小文件类型等
 * @param {*} file
 * @return {*}
 */
function imgBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2
  if (!isRightSize) {
    proxy.$modal.msgError('文件大小超过 2MB')
  }
  return isRightSize
}
/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return
    // TODO 提交表单
  })
}
/**
 * @name: 表单重置
 * @description: 表单重置方法
 * @return {*}
 */
function resetForm() {
  formRef.value.resetFields()
}

</script>
<style>
.el-rate {
  display: inline-block;
  vertical-align: text-top;
}

.el-upload__tip {
  line-height: 1.2;
}

</style>
